
//记录当前对象实例
var that;
//创建tab对象
class Tab {
	//通过id获取对象
	constructor(id) {
		that = this; //构造函数里面的this指向实例对象
		//main对象
		this.main = document.querySelector(id);
		//li对象
		this.lis = this.main.querySelectorAll('li');
		//section对象
		this.sections= this.main.querySelectorAll('section');
		//添加tabAdd
		this.tabadd = this.main.querySelector('.fisrstnav .tabadd');
		//tab切换的ul
		this.ul = this.main.querySelector('.fisrstnav ul');
		//内容盒子
		this.tabscon = this.main.querySelector('.tabscon');
		//关闭按钮
		this.remove = this.main.querySelectorAll('.icon');
		//获取选项的第一个span
		this.spans = this.main.querySelectorAll('.fisrstnav ul li span:first-child');
		//初始化
		this.init();
	}
	//实例化函数
	init() {
		this.updateLi();
		//绑定事件
		for(var i = 0; i < this.lis.length; i++) {
			this.lis[i].index = i;
			this.lis[i].onclick = this.toggleTab;
			this.remove[i].onclick = this.removeTab;
			this.spans[i].ondblclick = this.editTab;
			this.sections[i].ondblclick = this.editTab;
		}
		this.tabadd.onclick = this.addTab;
	}
	//更新Li
	updateLi() {
		this.remove = this.main.querySelectorAll('.icon')
		this.lis = this.main.querySelectorAll('li');
		this.sections= this.main.querySelectorAll('section');
		this.spans = this.main.querySelectorAll('.fisrstnav ul li span:first-child')
	}
	//切换函数
	toggleTab() {
//		console.log(this.index);
		that.removeClass();
		//清除其他li 和section的样式
		//当前的li添加liactive类
		this.className = 'liactive'
		//当前li对应的内容显示 因为section是实例对象的,所以不能用this了
		that.sections[this.index].className = 'conactive';
	}
	//清除其他样式
	removeClass() {
		//清除li样式
		for(var i = 0;i < this.lis.length; i++) {
			this.lis[i].className = ''
		}
		//清除section样式
		for(var i = 0; i < that.sections.length; i++) {
			that.sections[i].className = '';
		}
	}
	//添加函数
	addTab() {
		//判断li的个数
		that.init();
		if(that.lis.length >= 8) {
			return false;
		}
		that.removeClass();
		//创建li和section，添加
		var li = '<li class="liactive"><span>新增选项</span><span class="icon">x</span></li>';
		that.ul.insertAdjacentHTML('beforeend',li);
		var section = '<section class="conactive">新增内容</section>';
		that.tabscon.insertAdjacentHTML('beforeend',section);
		that.init();
		
	}
	//删除
	removeTab(e) {
		//阻止事件冒泡,防止li的点击事件被触发
		e.stopPropagation();
		//获取当前li的index
		var index = this.parentNode.index;
		//删除当前的父节点
		console.log(index)
		that.lis[index].remove();
		that.sections[index].remove();
		//更新节点数量
		that.init();
		//如果当前删除的li不是选中状态的
		if(document.querySelector('.liactive')) {
			return false;
		}
		//如果是第一个li选中
		if(index == 0) {
			index++;
		}
		//让删除节点的前一个节点处于被选中的状态
		index--;
		
		//手动调用点击事件
		that.lis[index] && that.lis[index].onclick();
	}
	//修改函数
	editTab(e) {
		//阻止事件冒泡
		e.stopPropagation();
		var str = this.innerHTML;
		console.log(str)
		//禁止双击选中文字
		window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
		//添加输入文本框
		this.innerHTML = '<input type="text"/>';
		//让文字显示在输入框里面
		this.children[0].value = str;
		//让输入框的文字全部被选中
		this.children[0].select();
		//当鼠标离开文本框的时候，讲内容显示到span中
		this.children[0].onblur = function() {
			this.parentNode.innerHTML = this.value;
		}
		//按下回车保存
		this.children[0].onkeyup = function(e) {
			//手动调用blur事件
			if(e.keyCode == 13) {
				this.blur();
			}
		}
	}
	
}
var tab = new Tab('#main');
//console.log(tab.sctions);
